<template>

    <div class="jingxuan" >
        <!--        查询文章-->
        <span class="from">
            <el-form :inline="true" :model="notice" class="demo-form-inline">
            <el-form-item label="通知标题:">
                <el-input v-model="notice.name"></el-input>
            </el-form-item>
                <el-form-item label="通知内容:">
                <el-input v-model="notice.context"></el-input>
            </el-form-item>
                <!--                //日期-->
                <!--<el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>-->
                <!--                //搜索日期-->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        </span>
<!--                新增文章-->
        <div style="margin-bottom: 30px">
            <el-button type="text" @click="resetData" :style="{'background-color':'#409EFF',color:'#fff',textAlign:'center',width:'100px',padding:'10px 0'}">
                <span>新增通知</span>
            </el-button>
            <!--            新增文章-->
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="通知名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="通知内容" :label-width="formLabelWidth">
                        <el-input v-model="form.publicitytext" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <!-------------------------------------------------------------------------------------------------->
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveDate">保 存</el-button>
                </div>
                <!--                ---------------------------------------------------------------------------------->
            </el-dialog>
        </div>

        <!--        文章列表展示-->
        <template>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    :header-cell-style="{'background-color':'#409EFF',color:'#fff',textAlign:'center'}"
                    :cell-style="{'text-align':'center'}">

                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="通知名称">
                </el-table-column>
                <el-table-column
                        prop="publicitytext"
                        label="通知内容">
                </el-table-column>
                <el-table-column
                        prop="createtime"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.$index)" type="text" size="small">编辑</el-button>
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index)"
                                type="text"
                                size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!--        删除操作-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span>此操作将永久删除该文件是否继续</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteData">确 定</el-button>
  </span>
        </el-dialog>


        <!--        分页组件-->
        <div :style="{marginTop:'20px'}">
            <template>
                <div>
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page.sync="currentPage"
                            :page-size="pageSize"
                            :total="pageCount"
                            @prev-click="getPrePage"
                            @next-click="getNextPage"
                    >
                    </el-pagination>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Notice",
        data(){
            return{

                //数据库的总条数
                pageCount: 0,
                //分页需要的当前页码
                // pageNum: '1',
                currentPage: 1,
                //分页每页显示的当前条数
                pageSize: 5,
                //搜索所运用的属性
                value1: '',
                notice: {
                    name: '',
                    context: ''
                },
                form:{
                    id:'',
                    name:'',
                    publicitytext:'',
                    createtime:'',
                },
                tableData: [],
                teachers:[],
                articleType:[],
                dialogFormVisible: false,
                dialogTableVisible: false,
                dialogTableVisible2:false,
                dialogVisible: false,
                formLabelWidth: '120px',
                title:'',
                state:'',
                value:'',
                valueType:''
            }
        },
        created() {
            this.refresh();
        },
        methods:{
            //获取时间
            getDateString(date){
                let yy = date.getFullYear();
                let mm = date.getMonth()+1;
                let dd = date.getDate();

                let str = yy + "-" + mm + "-" + dd ;
                return str;
            },
            //查找文章
            onSubmit(){
                this.axios.get("/publicityController/selectPublicityLike",{
                    params:{
                        name:this.notice.name,
                        publicityText:this.notice.context
                    }
                }).then(res=>{
                    this.tableData = res.data.data
                })
            },
            //获取所有文章列表
            // refresh(){
            //     this.axios.post("/publicityController/selectAllPublicity").then(res=>{
            //         console.log(res);
            //         this.tableData = res.data.data;
            //     })
            // },

            refresh() {
                this.axios.get("/publicityController/selectAllByPage", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                    }
                }).then(res => {
                    //获取成功后将数据付给articleData
                    this.tableData = res.data.data.list;
                    this.pageCount = res.data.data.total;
                })
            },

            //新增数据刷新
            resetData(){
                this.title = '新增文章';
                this.state = 1;
                this.dialogFormVisible = true;
                this.form.id = '';
                this.form.name= '';
                this.form.publicitytext= '';
                this.form.createtime = '';

            },
            //新增数据
            insertData(){
                this.axios.post("/publicityController/insert",{
                    name:this.form.name,
                    publicitytext:this.form.publicitytext,
                }).then(res=>{
                    console.log(res)
                })
            },
            //保存数据
            saveDate(){
                if (this.state === 1){
                    this.insertData();
                    setTimeout(()=>{this.refresh()},500);
                }
                if (this.state === 2){
                    this.updateDate();
                    setTimeout(()=>{this.refresh()},500);
                }
                this.dialogFormVisible = false;

            },
            //修改数据显示
            handleClick(index) {
                this.title = '编辑文章';
                this.state = 2;
                console.log(index);
                this.dialogFormVisible = true;
                console.log(this.tableData);
                this.form.id = this.tableData[index].id;
                this.form.name = this.tableData[index].name;
                this.form.publicitytext = this.tableData[index].publicitytext;
                this.form.createtime = this.tableData[index].createtime;
            },
            //修改数据
            updateDate(){
                this.axios.post("/publicityController/updateByPrimaryKey",{
                    id:this.form.id,
                    name:this.form.name,
                    publicitytext:this.form.publicitytext,
                    createtime:this.getDateString(new Date()),
                }).then(res=>{
                    console.log(this.form.id)
                    console.log(res)
                })
            },
            //删除数据
            deleteRow(index){
                this.dialogVisible = true;
                this.form.id = this.tableData[index].id;
                console.log(this.form.id);
            },
            deleteData(){
                this.dialogVisible = false;
                this.axios.delete("/publicityController/deleteByPrimaryKey",{
                    params:{
                        id:this.form.id
                    },
                     }).then(res=>{
                    console.log(res)
                    setTimeout(()=>{this.refresh()},500)
                })
            },

            //当点击上一页的时候
            handleCurrentChange(val) {
                this.currentPage=val;
                this.refresh();
            },
            getPrePage(val) {
                this.currentPage=val;
                this.refresh();
            },
            getNextPage(val) {
                this.currentPage=val;
                this.refresh();
            },

        }
    }
</script>

<style scoped>

</style>

